{% extends 'base.html' %}

{% block head %}
<style>
    @font-face {
        font-family: 'MaobiFont'; /* 字体名称 */
        src: url('../static/fonts/FZQiTi-S14S.TTF') format('truetype');
    }

    .post-title {
        font-size: 24px;
        color: #e56244;
    }

    .post-favorite {
        text-align: right;
        font-weight: bold;
    }

    .post-favorite .animate {
        animation: pulse 0.5s ease;
    }

    .post-info {
        margin-top: 20px;
        border-bottom: solid 1px #cccccc;
        line-height: 60px;
    }

    .post-info span {
        display: inline-block;
        padding-right: 20px;
    }

    .post-content {
        margin-top: 30px;
        margin-bottom: 30px;
        line-height: 29px;
        word-break: break-all;
        word-wrap: break-word;
    }

    .post-content .readall {
        margin: 20px 0;
        text-align: center;
    }

    .post-content .readall button {
        height: 45px;
        background-color: #337AB7;
        border: 0;
        border-radius: 5px;
        color: white;
        font-weight: bold;
    }


    .post-nav {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin: 30px 0;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); /* 微妙阴影 */
        padding: 20px 50px;
        background: #fff; /* 纯白背景 */
        transition: box-shadow 0.3s; /* 悬停效果 */
    }

    .post-nav div {
        line-height: 40px;
    }


</style>
{% endblock head %}


{% block bodyMiddle %}

<div class="col-sm-9 col-12" style="padding: 0">
    <!--文章内容-->
    <div class="article-panel">
        <div class="col-12 row">
            <div class="col-9 post-title">
                {{article.headline}}
            </div>
            <div class="col-3 post-favorite">
                <div id="favorite-btn">
                    <!--                    <label-->
                    <!--                    style="cursor: pointer;color: #e56244"><i class="fa fa-heart"-->
                    <!--                                                              aria-hidden="true"></i>&nbsp;已收藏</label>-->
                </div>
            </div>
            <div class="col-12 post-info">
                <span>作者：{{article.nickname}}</span>
                <span>类别：{{article_type[article.type | string]}}</span>
                <span>日期：{{article.createtime}}</span>
                <span>阅读：{{article.readcount}}次</span>
                {% if article.credit > 0 %}
                <span>所需积分：{{article.credit}}</span>
                {% endif %}
            </div>
            <div class="col-12 post-content" id="article_content">
                {{article.content | safe}}
                {% if article.credit > 0 and article.nickname!=session.nickname and paid_flag==False %}
                <div class="readall">
                    <button class="col-sm-10 col-12" onclick="readAll()">
                        <span class="oi oi-data-transfer-download" aria-hidden="true"></span>
                        阅读全文（消耗积分：{{article['credit']}} 分）
                    </button>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <!--文章底部导航-->
    <div class="post-nav">
        <div style="color: #2b3035;font-family: 'MaobiFont';font-size: 17px">阅微札记<br>
            晨昏探幽赜，万象入毫端。星斗罗胸次，云涛生砚澜。苔花绽古壁，芥子纳坤乾。积霭成天瀑，<br>
            涓滴汇海湍。扪虱论寰宇，骑鲸啸宙巅。展卷惊神鬼，长歌破冥渊。何惧星霜改，光华照岁寒。
        </div>
        <div>版权所有，转载文章请注明出处。</div>
        <div><a href="/article/{{pre_next_dict.prev_id}}">上一篇：{{pre_next_dict.prev_headline}}</a></div>
        <div><a href="/article/{{pre_next_dict.next_id}}">下一篇：{{pre_next_dict.next_headline}}</a></div>
    </div>
    <!--文章评论区-->
    <div class="post-comment">
        <div style="color: #252933;font-size: 18px;font-weight: 600;line-height: 30px;margin-bottom: 20px">评论</div>
        <div class="col-12 row">
            <div class="col-1"><img src="../static/img/avatar/{{session.avatar}}"
                                    style="width: 36px;margin-top: 5px;border-radius: 50%"></div>
            <div class="col-11 form-floating">
                <textarea class="form-control" id="floatingTextarea"
                          style="height: 100px;width: 750px;padding-top: 8px"></textarea>
            </div>
        </div>
        <div class="col-12 clearfix">
            <div style="float: right;padding-right: 80px;padding-top: 10px">
                <button class="btn btn-primary" id="comment-btn" onclick="addcomment('{{article.articleid}}')">发表评论
                </button>
            </div>
        </div>
        <div class="reddit col-12">
            <div class="img-container">
<!-- 显示最新-->
                <div class="comment-zone"><label style="display: inline-block;padding-bottom: 20px">最新</label>
                    {% for comment,user in comment_user %}
<!--遍历所有评论让评论显示出来-->
                    <div class="col-12 list row">
                        <div class="col-2 icon">
<!--显示用户头像-->
                            <img src="../static/img/avatar/{{user.avatar}}" class="img-fluid"
                                 style="width: 35px;border-radius: 50%;margin-top: 7px"/>
                        </div>
                        <div class="col-10 comment">
<!--显示评论时间、内容和回复、隐藏、评论按钮-->
                            <div class="col-12 row" style="padding: 0px;">
                                <div class="col-12 commenter">{{user.nickname}}&nbsp;&nbsp;&nbsp;
                                    {{comment.createtime}}
                                </div>
                            </div>
                            <div class="col-12 content">
                                {{comment.content}}
                            </div>
                            <div class="col-12 reply">
                                <!-- 文章作者、管理员和评论者只能回复和隐藏，不能点赞 -->
                                {% if article.userid == session.get('userid') or session.get('role') == 'admin' or
                                comment.userid == session.get('userid') %}
                                <label>
                                    <p class="d-inline-flex gap-1">
                                        <a data-bs-toggle="collapse" href="#collapseExample-{{comment.commentid}}"
                                           role="button" aria-expanded="false" aria-controls="collapseExample">
                                            <span>回复</span>
                                        </a>
                                    </p>
                                </label>&nbsp;&nbsp;&nbsp;
                                <label onclick="hideComment(this, '{{comment.commentid}}')">
                                    <span class="oi oi-delete" aria-hidden="true"></span>隐藏
                                </label>
                                <!-- 其他用户只能回复和点赞，不能隐藏 -->
                                {% else %}
                                <label>
                                    <p class="d-inline-flex gap-sm-1">
                                        <a data-bs-toggle="collapse" href="#collapseExample-{{comment.commentid}}"
                                           role="button" aria-expanded="false" aria-controls="collapseExample">
                                            回复
                                        </a>
                                    </p>
                                </label>&nbsp;&nbsp;&nbsp;
                                <label onclick="agreeComment(this, '{{comment.commentid}}')">
                                    <span class="oi oi-chevron-bottom" aria-hidden="true"></span>赞成(<span>{{comment['agreecount']}}</span>)
                                </label>&nbsp;&nbsp;&nbsp;
                                <label onclick="opposeComment(this, '{{comment.commentid}}')">
                                    <span class="oi oi-x" aria-hidden="true"></span>反对(<span>{{comment['opposecount']}}</span>)
                                </label>
                                {% endif %}
                            </div>

<!--                            collapse用来弹出回复的评论框-->
                            <div class="collapse" id="collapseExample-{{comment.commentid}}">
                                <div class="col-11 form-floating clearfix" style="position: relative">
                <textarea class="form-control" id="floatingTextareasub-{{comment.commentid}}"
                          style="height: 70px"></textarea>
                                    <div style="float: right">
                                    <button class="btn btn-primary btn-sm" style="position: absolute;bottom: 18%;right: 1%" onclick="replyComment('{{comment.commentid}}')">回复</button>
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    <input type="text" style="display: none" id="getArticleid" value="{{article.articleid}}">
                </div>
            </div>

        </div>
    </div>
</div>


<script>
    // 需要消耗积分的文章点击查看剩余的文章
    function readAll() {
        var params = 'articleid={{article.articleid}}&&position={{position}}';
        // console.log(params);
        $.post('/readall', params, data => {
            if (data == 'not_enough_credit') {
                alert('积分不足！')
            } else {
                $("#article_content").append(data);
                $(".readall").hide();
            }
        })
    }

    // 文章收藏和取消收藏
    document.addEventListener('DOMContentLoaded', function () {
        var favorite_btn = document.getElementById('favorite-btn');
        let isFavorited = {{ is_favorited | lower }}
        ;
        if (isFavorited) {
            favorite_btn.innerHTML = '<label style="color: #e74c3c;cursor: pointer"><i class="fa fa-heart" aria-hidden="true"></i>&nbsp;已收藏</label>';
        } else {
            // console.log(isFavorited)
            favorite_btn.innerHTML = '<label style="color: #13653f;cursor: pointer"><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp;收藏本文</label>';
        }
        // 处理收藏按钮点击
        favorite_btn.addEventListener('click', function () {
            // 添加动画效果
            this.classList.add('animate');
            setTimeout(() => {
                this.classList.remove('animate');
            }, 500);
            //发送ajax请求
            fetch('/favorite', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json' // 确保这里设置正确的Content-Type
                },
                body: JSON.stringify({
                    article_id: `{{article.articleid}}`,
                    action: isFavorited ? 'unfavorite' : 'favorite'
                })
            }).then(response => {
                if (!response.ok) {
                    throw new Error('网络错误');
                } else {
                    return response.text()
                }
            }).then(data => {
                console.log(data)
                if (data === 'favorite-pass') {
                    favorite_btn.innerHTML = '<label style="color: #e74c3c;cursor: pointer"><i class="fa fa-heart" aria-hidden="true"></i>&nbsp;已收藏</label>';
                    isFavorited = true
                } else if (data === 'cancel-favorite-pass') {
                    favorite_btn.innerHTML = '<label style="color: #13653f;cursor: pointer"><i class="fa fa-heart-o" aria-hidden="true"></i>&nbsp;收藏本文</label>';
                    isFavorited = false
                } else if (data === 'favorite-fail') {
                    alert('收藏失败！');
                } else if (data === 'cancel-favorite-fail') {
                    alert('取消收藏失败');
                } else {
                    alert('操作失败');
                }
            }).catch(error => {
                console.error('Error:', error);
            })
        })

    })

    //提交新的原始评论
    function addcomment(articleid) {
        var content = document.getElementById('floatingTextarea').value.trim();
        if (content.length < 2 || content.length > 200) {
            alert('错误提示：评论字数请控制在2-200字之间！');
            return false;
        }
        var params = 'articleid=' + articleid + '&content=' + content;
        fetch('/comment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params
        }).then(response => response.text())
            .then(data => {
                if (data == 'content-invalid') {
                    alert({title: "错误提示", message: "评论内容在5-1000字之间."});
                } else if (data == 'add-limit') {
                    alert({title: "错误提示", message: "你当天已经用完5条评论的限额."});
                } else if (data == 'add-pass') {
                    window.location.reload();
                } else {
                    alert({title: "错误提示", message: "发表评论出错，请联系管理员."});
                }
            })
    }


    function replyComment(commentid) {
        const textarea = document.getElementById(`floatingTextareasub-${commentid}`);
        // 获取textarea的内容
        const content = textarea.value;
        var commentid=commentid;
        var articleid=document.getElementById('getArticleid').value;
        var params='articleid='+articleid+'&commentid='+commentid+'&content='+content;
        fetch('/reply',{
            method:'POST',
            headers:{'Content-Type':'application/x-www-form-urlencoded'},
            body:params
        }).then(response => response.text())
            .then(data =>{
                if (data == 'add-pass'){
                    window.location.reload()
                }else if (data == 'add-fail'){
                    alert('回复失败')
                }else if (data == 'add-limit'){
                    alert('今日评论已经超量')
                }else{
                    alert('回复内容不符合要求， 请回复2-200字范围评论')
                }
            })
    }


</script>

{% include 'include/side_vue.html' %}

{% endblock bodyMiddle %}